<template>
    <div class="container-full">
        <div class="containers">

            <div class="head">精彩回顾</div>

            <div class="main" v-if="empty == false">
                <div class="box" v-for="item in tableData" :key="item.videoId" @click="item.isView == 1?onvideo(item):openLayer('精彩回顾','对不起,您暂无权限观看此课程回放')">
                    <el-image style="width: 100%; height: 139px" :src="item.wholeWeixinCover" fit="fill" lazy></el-image>
                    <div class="box-footer">
                        <div>{{ item.channelName.substring(0, 6) }}</div>
                        <div>{{ item._time }}</div>
                    </div>
                </div>
            </div>

            <div class="empty" v-else-if="empty == true">
                <img :src="PIC_URL + '/experience/wushuju2.png'" style="width: 500px;height: 291px;">
            </div>


        </div>
    </div>

</template>

<script>

import mixin from "../utils/mixin";
import {getVideoList} from "../api/api";
import {openWeb, windowOpen} from "@/common/common";

export default {
    name: "videoList",
    mixins: [mixin],
    data(){
        return {
            queryData: {},
            tableData: [],
            empty: '',
            centralToken: '',
        }
    },
    mounted() {

        this.queryData.productId = this.$route.query.productId || '';



        //pro+版本ID（77）转换成Pro版本ID（64）
        /*if (this.$route.query.productId != '' && this.$route.query.productId == 77) {
            this.queryData.productId = 64;
        } else {

        }*/
        let token = this.$route.query.token || '';
        this.queryData.clientCentralToken = token;
        this.init();

        localStorage.setItem('token',token);
    },
    methods: {
        async init() {
            await getVideoList(this.queryData).then(res => {

                let arr = [];
                for (let item of res.data.videos) {
                    const start = item.recordStartTimeStr.substring(5);
                    const end = item.recordEndTimeStr.substring(11);
                    item._time = `${start}-${end}`;
                    arr.push(item);
                }
                this.tableData = arr;
                this.empty = false;
            }).catch(err => {
                this.empty = true;
            });
        },
        onvideo(item) {
            windowOpen(item.playbackLink + '&token=' + this.queryData.clientCentralToken , item.channelName);
        }
    }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    height: 6px !important;
    overflow: visible;
    width: 6px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: #d7d7d7;
}

.container-full {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #090910;
}

.containers {
    margin: 0 auto;
    width: 1200px;
    height: 100%;
    padding-top: 16px;
}

.head {
    position: relative;
    width: calc(100% - 17px);
    height: 30px;
    line-height: 30px;
    background: #27282e;
    border: 1px solid #434448;
    color: #bcbfc4;
    padding-left: 15px;
    margin-bottom: 20px;
}

.head::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 30px;
    background-color: #ff8a1b;
}

.main{
    width: calc(100% + 20px);
    height: calc(100% - 80px);
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;

    .box {
        flex: 0 0 calc(20% - 20px);
        margin-bottom: 20px;
        padding-right: 20px;

        .box-footer {
            display: flex;
            justify-content: space-between;
            color: #bcbfc4;
            font-size: 15px;
            margin: 10px 0;
        }
    }

    .box-footer {
        display: flex;
        justify-content: space-between;
        color: #bcbfc4;
        font-size: 15px;
        margin: 10px 0;
    }

}

.empty {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

